<!DOCTYPE html>
<html lang="zh_CN">
<head>
	<title>our home</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<!-- Latest compiled and minified CSS -->
	<!-- Custom styles for this template -->
	<link rel="stylesheet" href="css/scojs.css">
	<link rel="stylesheet" href="kde/themes/default/default.css" />
	
</head>

<body >
	#include("/include/header.html")
	<div class="jumbotron" style="background-color:#3E444C">
		<div class="container">
			<div class="row">
				<div class="col-lg-10">
					<h1> <strong class="text-info">欢迎说说</strong>
						<small class="text-info">看看我们都在谈论什么,你也可以参与哦....</small>
					</h1>
				</div>
				
			</div>
		</div>

	</div>

	<!-- Marketing messaging and featurettes
    ================================================== -->
	<!-- Wrap the rest of the page in another container to center all the content. -->

	<div class="container marketing">

		<hr>

		<section>
			<div class="row">
				<div class="col-lg-9">
					<div class="row">
						<div class="col-lg-12">
							<div class="panel panel-default">
								<div class="panel-heading">
									<strong class="text-info">说点什么吧</strong>
								</div>
								<div class="panel-body">
									<textarea id="say_content" name="say_content" class="form-control" rows="5"></textarea>
									<br>
									<span class="text-info" id="hs_count"></span>
									<button id="saysay" class="btn btn-info pull-right" type="button">
										<span class="glyphicon glyphicon-ok"></span>
										&nbsp;&nbsp;说说
									</button>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-lg-12">
							<div class="panel panel-primary">
								<div class="panel-body">
									<div class="media">
										<a class="pull-left" href="#">
											<img class="media-object" src="" alt="64x64"></a>
										<div class="media-body">
											<h4 class="media-heading text-success">妈妈:</h4>
											<p class="text-info hs-content">
												今天妈妈去检查了，听了小张张的心跳声，声音砰砰砰的响个不停，真像个小火车，宝宝很健康，妈妈很开心妈妈很开心........
												<span class="pull-right">
													<a class="btn btn-success btn-xs hs-btn">
														<span class="glyphicon glyphicon-comment" data-placement="bottom" data-toggle="tooltip" data-original-title="回说"></span>
													</a>
													<a href="" class="btn btn-danger btn-xs hs-del">
														<span class="glyphicon glyphicon-trash" data-placement="bottom" data-toggle="tooltip" data-original-title="删除"></span>
													</a>
													&nbsp;
													<small id="time1" class="text-info">2013-09-30 11:20:12</small>
												</span>
											</p>
											<hr>
											<div class="media">
												<a class="pull-left" href="#">
													<img class="media-object" src="" alt="64x64"></a>
												<div class="media-body">
													<h4 class="media-heading text-success">爸爸:</h4>
													<p class="text-info hs-content">
														小张张越来越大啦，很期待你哦.
														<span class="pull-right">
															<a class="btn btn-success btn-xs hs-btn">
																<span class="glyphicon glyphicon-comment" data-placement="bottom" data-toggle="tooltip" data-original-title="回说"></span>
															</a>
															<a href="" class="btn btn-danger btn-xs hs-del">
																<span class="glyphicon glyphicon-trash" data-placement="bottom" data-toggle="tooltip" data-original-title="删除"></span>
															</a>
															&nbsp;
															<small class="text-info">2013-09-30 11:22:15</small>
														</span>
													</p>

												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-lg-12">
							<div class="panel panel-primary">
								<div class="panel-body">
									<div class="media">
										<a class="pull-left" href="#">
											<img class="media-object" src="" alt="64x64"></a>
										<div class="media-body">
											<h4 class="media-heading text-success">妈妈:</h4>
											<p class="text-info hs-content">
												小张张都18周啦，妈妈的肚肚越来越大了，小张张张的越来越快了......
												<span class="pull-right">
													<a class="btn btn-success btn-xs hs-btn">
														<span class="glyphicon glyphicon-comment" data-placement="bottom" data-toggle="tooltip" data-original-title="回说"></span>
													</a>
													<a href="" class="btn btn-danger btn-xs hs-del">
														<span class="glyphicon glyphicon-trash" data-placement="bottom" data-toggle="tooltip" data-original-title="删除"></span>
													</a>
													&nbsp;
													<small class="text-info">2013-10-10 11:23:12</small>
												</span>
											</p>
											<hr>
											<div class="media">
												<a class="pull-left" href="#">
													<img class="media-object" src="" alt="64x64"></a>
												<div class="media-body">
													<h4 class="media-heading text-success">爸爸:</h4>
													<p class="text-info hs-content">
														妈妈越来越辛苦了，张小张要听话哦，爸爸妈妈很爱你的.....
														<span class="pull-right">
															<a class="btn btn-success btn-xs hs-btn">
																<span class="glyphicon glyphicon-comment" data-placement="bottom" data-toggle="tooltip" data-original-title="回说"></span>
															</a>
															<a href="" class="btn btn-danger btn-xs hs-del">
																<span class="glyphicon glyphicon-trash" data-placement="bottom" data-toggle="tooltip" data-original-title="删除"></span>
															</a>
															&nbsp;
															<small class="text-info">2013-09-30 11:20:12</small>
														</span>
													</p>
													<hr>
													<div class="media">
														<a class="pull-left" href="#">
															<img class="media-object" src="" alt="64x64"></a>
														<div class="media-body">
															<h4 class="media-heading text-success">张小张:</h4>
															<p class="text-info hs-content">
																我一直很听话的，我喜欢妈妈带我出去玩，给我唱歌；喜欢爸爸给我讲故事.....
																<span class="pull-right">
																	<a class="btn btn-success btn-xs hs-btn" data-value="">
																		<span class="glyphicon glyphicon-comment" data-placement="bottom" data-toggle="tooltip" data-original-title="回说"></span>
																	</a>
																	<a href="" class="btn btn-danger btn-xs hs-del">
																		<span class="glyphicon glyphicon-trash" data-placement="bottom" data-toggle="tooltip" data-original-title="删除"></span>
																	</a>
																	&nbsp;
																	<small class="text-info">2013-09-30 11:20:12</small>
																</span>
															</p>
														</div>
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-lg-12">
							<div class="panel panel-primary">
								<div class="panel-body">
									<div class="media">
										<a class="pull-left" href="#">
											<img class="media-object" src="" alt="64x64"></a>
										<div class="media-body">
											<h4 class="media-heading text-success">妈妈:</h4>
											<p class="text-info hs-content">
												今天妈妈去检查了，听了小张张的心跳声，声音砰砰砰的响个不停，真像个小火车，宝宝很健康，妈妈很开心........
												<span class="pull-right">
													<a class="btn btn-success btn-xs hs-btn">
														<span class="glyphicon glyphicon-comment" data-placement="bottom" data-toggle="tooltip" data-original-title="回说"></span>
													</a>
													<a href="" class="btn btn-danger btn-xs hs-del">
														<span class="glyphicon glyphicon-trash" data-placement="bottom" data-toggle="tooltip" data-original-title="删除"></span>
													</a>
													&nbsp;
													<small id="time1" class="text-info">2013-09-30 11:20:12</small>
												</span>
											</p>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-lg-4 col-lg-offset-4">
							<ul class="pager">
								<li class="previous">
									<a href="#">&larr; 上一页</a>
								</li>
								<li class="next">
									<a href="#">下一页 &rarr;</a>
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="col-lg-3 text-info pinned">

					<h3 class="text-center">
						<strong>说说榜</strong>
					</h3>

					<div class="list-group text-info">

						<a href="say_list.html" class="list-group-item">

							<div class="media line-height
">
								<div class="pull-left">
									<img class="media-object img-circle" data-src="holder.js/64x64" alt="..."></div>
								<div class="media-body text-info ">
									<h4 class="media-heading">妈妈</h4>
									说说数:
									<span class="badge pull-right">14</span>
								</div>
							</div>

						</a>
						<a href="say_list.html" class="list-group-item">
							<div class="media">
								<div class="pull-left">
									<img class="media-object img-circle" data-src="holder.js/64x64" alt="..."></div>
								<div class="media-body text-info">
									<h4 class="media-heading">爸爸</h4>
									说说数:
									<span class="badge pull-right">21</span>
								</div>
							</div>
						</a>
						<a href="say_list.html" class="list-group-item">
							<div class="media">
								<div class="pull-left">
									<img class="media-object img-circle" data-src="holder.js/64x64" alt="..."></div>
								<div class="media-body text-info">
									<h4 class="media-heading">王阿姨</h4>
									说说数:
									<span class="badge pull-right">15</span>
								</div>
							</div>
						</a>
						<a href="say_list.html" class="list-group-item">
							<div class="media">
								<div class="pull-left">
									<img class="media-object img-circle" data-src="holder.js/64x64" alt="..."></div>
								<div class="media-body text-info">
									<h4 class="media-heading">叔叔</h4>
									说说数:
									<span class="badge pull-right">15</span>
								</div>
							</div>
						</a>
						<a href="say_list.html" class="list-group-item">
							<div class="media">
								<div class="pull-left">
									<img class="media-object img-circle" data-src="holder.js/64x64" alt="..."></div>
								<div class="media-body text-info">
									<h4 class="media-heading">爷爷</h4>
									说说数:
									<span class="badge pull-right">15</span>
								</div>
							</div>
						</a>
					</div>
				</div>
			</div>
		</section>

		<hr class="">

		<!-- /END THE FEATURETTES -->

		<!-- FOOTER -->
		#include("/include/footer.html")

	</div>
	<!-- /.container -->
	<!-- 隐藏域用来传递自己要用的额外参数 -->
	<input type="hidden" id="hs_id" value="sg123">
	<!-- 注册结束 -->

	
	<script type="text/javascript" src="js/bootbox.js"></script>
	<script type="text/javascript" src="kde/kindeditor-all-min.js"></script>
	<script type="text/javascript" src="kde/lang/zh_CN.js"></script>
	<script type="text/javascript" src="js/jquery.lwtCountdown-1.0.js"></script>
	<script src="js/jquery.pin.min.js"></script>
	
	<script type="text/javascript">
		$(function(){

			 //定位右边排行
			 $(".pinned").pin({containerSelector: ".container", minWidth: 100});

			$('.row').tooltip({
      			selector: "[data-toggle=tooltip]",
      			container: "body"
    		});
    		
			//说说按钮提交事件
			$("#saysay").on('click', function(event) {
				event.preventDefault();
				var say_content = $("#say_content").val();
				if (say_content==null||say_content=='') {
				    $.scojs_message('总得说点什么吧....', $.scojs_message.TYPE_ERROR);
				    return false;
				};
				alert(say_content);
				//下面进行ajax提交保存操作
			});

			//点击回说按钮加载回说框
			$('.hs-btn').click(function() {
				var hs_content = $(this).parent();
				var hs_div = $(hs_content).next('div');
				//判断有没有回说框，没有就生成回说框，有就忽略了
				if(hs_div.length==0||hs_div.html()=='undefined'){
					$(this).parents(".hs-content").append('<div class="hs_kuang"><textarea id="re_content" name="re_content"></textarea><div> <button class="btn btn-info btn-xs" name="remove" onclick="hideHs(this);">暂不</button>&nbsp;&nbsp;<button class="btn btn-success btn-xs" onclick="confirmHs(this);">回说</button><label class="re_count"></label></div></div>');
					$.getScript('kde/kindeditor-all-min.js', function() {
						KindEditor.basePath = './kde/';
						var hs_editor = KindEditor.create('textarea[name="re_content"]', {
											themeType : 'simple', 
											resizeType : 1,
											allowPreviewEmoticons : false,
											allowImageUpload : true,
											width : '70%',
											newlineTag:'br',
											items : [
												'bold', 'italic', 'underline',
												'removeformat','emoticons', 'link'],
											afterChange : function() {
											      //限制字数
											      var limitNum = 200;  //设定限制字数
											      var pattern = this.count('text')+'/' + limitNum + '字'; 
											      hs_div = $(hs_content).next('div');
											      var re_count = $(hs_div).find('.re_count');
											      $(re_count).html(pattern); //输入显示
											      if(this.count('text') > limitNum) {
												       pattern = ('字数超啦');
												       //超过字数限制自动截取
												       var strValue = hs_editor.text();
												       strValue = strValue.substring(0,limitNum);
												       hs_editor.text(strValue);
											       }
											       $(re_count).html(pattern); //输入显示	
											       var re_self = this;
												   re_self.sync();
												}
											});
						});
				}
			});

			//弹出警告框设置http://bootboxjs.com/#about
			bootbox.setDefaults({
				locale: "zh_CN"
			});
			//点击删除回说内容的时候
			$(".hs-del").on('click', function(event) {
	            event.preventDefault();
	            bootbox.confirm("你确认要删除这条说说吗？", function(result) {
	            	if (result) {
	            		//这里做物理删除操作
	            		alert("已删除"+result);		
	            	};
	            });
	          });
		});
	</script>
	<script>
			//富文本编辑框
			var editor;
			KindEditor.ready(function(K) {
				editor = K.create('textarea[name="say_content"]', {
					themeType : 'simple',
					resizeType : 1,
					allowPreviewEmoticons : false,
					allowImageUpload : true,
					width : '100%',
					newlineTag:'br',
					items : [
						'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
						'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
						'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
					afterChange : function() {
				      //限制字数
				      var limitNum = 200;  //设定限制字数
				      var pattern = this.count('text')+'/' + limitNum + '字'; 
				      $('#hs_count').html(pattern); //输入显示
				      if(this.count('text') > limitNum) {
					       pattern = ('字数超过限制，请适当删除部分内容');
					       //超过字数限制自动截取
					       var strValue = editor.text();
					       strValue = strValue.substring(0,limitNum);
					       editor.text(strValue);
				       }
				       $('#hs_count').html(pattern); //输入显示	
				       var self = this;
					   self.sync();
					}
				});
			});
	</script>
	<script type="text/javascript">
		//点击回说框的暂不按钮时隐藏回说框
		function hideHs(obj){
			var hs_kuang = $(obj).parents(".hs_kuang");
			$(hs_kuang).remove();
		}
		//点击回说框的提交按钮提交回说内容，请使用ajax提交，动态添加
		function confirmHs(obj){
			var hs_kuang = $(obj).parents(".hs_kuang");
			var re_text = $(hs_kuang).find("textarea")[1];
			var hs_content = $(re_text).val();
			// alert(hs_content);
			if (hs_content==null||hs_content=='') {
			    $.scojs_message('总得说点什么吧....', $.scojs_message.TYPE_ERROR);
			    return false;
			};
			//下面进行ajax提交保存操作
		}
	</script>
	
	#include("/include/res_login.html")
	
</body>

</html>